<template>
  <div class="personal-info-container">
    <div class="flex justify-between items-center mb-4">
      <div class="flex items-center -ml-8">
        <div class="relative cursor-pointer" @click="handleAvatarClick">
          <el-upload

              class="avatar-uploader"
              action="/api/user/user/pian"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon  v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
        <div class="ml-4">
          <h2 class="text-2xl font-bold text-gray-800">个人信息</h2>
        </div>
      </div>
      <button
          @click="toggleEdit"
          class="bg-transparent text-blue-500 hover:text-blue-600 focus:outline-none"
      >
        <i class="fas fa-edit mr-1"></i> {{ isEditing ? '完成编辑' : '编辑信息' }}
      </button>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full border-collapse">
        <tbody>
        <tr>
          <th class="text-left text-gray-600 px-4 py-2">姓名：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.realName }}</span>
            <input
                v-else
                v-model="userInfo.realName"
                type="text"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
          <th class="text-left text-gray-600 px-4 py-2">性别：</th>
          <td class="px-4 py-2">
              <span v-if="!isEditing">
                <span v-if="userInfo.sex == '1'">男</span>
                <span v-if="userInfo.sex == '2'">女</span>
              </span>
            <select
                v-else
                v-model="userInfo.sex"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
              <option value="">请选择</option>
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </td>
        </tr>
        <tr>
          <th class="text-left text-gray-600 px-4 py-2">手机号码：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.phone }}</span>
            <input
                v-else
                v-model="userInfo.phone"
                type="tel"
                pattern="[0-9]{11}"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
          <th class="text-left text-gray-600 px-4 py-2">邮箱：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.email }}</span>
            <input
                v-else
                v-model="userInfo.email"
                type="email"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
        </tr>
        <tr>
          <th class="text-left text-gray-600 px-4 py-2">年龄：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.age }}</span>
            <input
                v-else
                v-model="userInfo.age"
                type="number"
                min="18"
                max="100"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
          <th class="text-left text-gray-600 px-4 py-2">工作经验：</th>
          <td class="px-4 py-2">
              <span v-if="!isEditing">
                <span v-if="userInfo.workExperience == '1'">1-3年</span>
                <span v-if="userInfo.workExperience == '2'">3-5年</span>
                <span v-if="userInfo.workExperience == '3'">5-10年</span>
                <span v-if="userInfo.workExperience == '4'">10年以上</span>
              </span>
            <select
                v-else
                v-model="userInfo.workExperience"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
              <option value="">请选择</option>
              <option value="1">1-3年</option>
              <option value="2">3-5年</option>
              <option value="3">5-10年</option>
              <option value="4">10年以上</option>
            </select>
          </td>
        </tr>
        <tr>
          <th class="text-left text-gray-600 px-4 py-2">求职意向：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.jobObjective }}</span>
            <input
                v-else
                v-model="userInfo.jobObjective"
                type="text"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
          <th class="text-left text-gray-600 px-4 py-2">期望城市：</th>
          <td class="px-4 py-2">
            <span v-if="!isEditing">{{ userInfo.city }}</span>
            <input
                v-else
                v-model="userInfo.city"
                type="text"
                class="border border-gray-300 rounded-md px-2 py-1 w-full"
            >
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <button
        v-if="isEditing"
        @click="saveInfo"
        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md mt-4"
    >
      保存信息
    </button>


    <!--文件上传-->
    <el-upload
        class="upload-demo"
        drag
        action=" api/user/userProfile/pian "
        multiple
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将你的简历拖拽到这里 <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          可以将简历上传到此处
        </div>
      </template>
    </el-upload>
  </div>




<!--  测试-->

<!--  <div>-->
<!--    <input type="file" ref="fileInput" />-->
<!--    <button @click="uploadFile">上传文件</button>-->
<!--    <div v-if="!fileSelected && showMessage">请选择一个文件！</div>-->
<!--    <div v-if="viewUrl">-->
<!--      <a :href="viewUrl" target="_blank">查看文件</a>-->
<!--    </div>-->
<!--  </div>-->



</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from "axios";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";



const ui = ref();
ui.value = localStorage.getItem("uid");
const imageUrl = ref("")
console.log(ui.value);
const tou = ref();
tou.value = localStorage.getItem("touxiang");
console.log(tou.value);

const ma=ref()
const jian=ref()
tou.value = localStorage.getItem("haoma");
tou.value = localStorage.getItem("youjian");
// 查询
// 表单数据
const userInfo = ref({
  tou: tou.value,
  realName: '',
  sex: '',
  phone: ma.value,
  email: jian.value,
  age: '',
  workExperience: '',
  jobObjective: '',
  city: '',
  resumeUrl:""
});

// 编辑状态
const isEditing = ref(false);
const fen = () => {
  axios({
    url: "/api//user/userProfile/findall",
    method: "get",
    params: { id: ui.value }
  }).then((rew) => {
    userInfo.value = rew.data;
    console.log(userInfo);
    imageUrl.value = userInfo.value.tou
  });
};
fen();

// 切换编辑状态
const toggleEdit = () => {
  isEditing.value = !isEditing.value;
};

// 保存信息
const saveInfo = () => {

  axios({
    url:"/api/user/userProfile/upd",
    method:"get",
    params:userInfo.value
  }).then((rew)=>{
    if(rew.data==1){
      ElMessage.success("修改成功")
         fen()
    }else {
      ElMessage.error("修改失败")
    }
  })


};
// 加头像
const handleAvatarSuccess = (response, uploadFile) => {
  console.log(response)
  userInfo.value.tou=response

  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg ' && rawFile.type !== 'image/png' && rawFile.type == 'image/jpg') {
    ElMessage.error('请上传正确的格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('上传不能大于 2MB!')
    return false
  }
  return true
}
import { UploadFilled } from '@element-plus/icons-vue'


</script>

<style scoped>
.personal-info-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
}

th {
  color: #6c757d;
  font-weight: normal;
  white-space: nowrap;
}

td {
  border-bottom: 1px solid #eaeaea;
}

input, select {
  width: 100%;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background-color: white;
}

input:focus, select:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.2);
}

.relative {
  position: relative;
}

.relative:hover img {
  cursor: pointer;
}

.absolute.bottom-0.right-0 {
  bottom: -8px;
  right: -8px;
}

button {
  transition: all 0.2s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  table {
    font-size: 0.9rem;
  }

  .flex justify-between {
    flex-direction: column;
    align-items: flex-start;
  }

  .ml-4 {
    margin-left: 0;
    margin-top: 16px;
  }
}
</style>



<style>
.avatar-uploader .avatar {
  /* 修改图片的宽度和高度 */
  width: 60px;
  height: 60px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>